<template>
	<div class="dianjichakan">
      <el-dialog title="数据信息导出" :visible.sync="log" :close-on-click-modal="false" width="1200px" top="50px">
        <div style="margin-bottom: 20px; font-size: 16px; color: #333;">快速导出模版</div>
        <div class="kflexc">
          <div style="margin-right: 10px; margin-bottom: 10px; width: 200px; height: 50px; border-radius: 10px; position: relative; background: rgb(247, 248, 250); cursor: pointer; overflow: visible" :class="act == item.id?'act':''"
            class="kflexcc" @click.stop="changeitem(item)" v-for="(item,index) in list" @mouseenter="mouseenter2(item)" @mouseleave="mouseout2(item)" :key="item.id">
            {{item.title}}
            <i class="el-icon-edit bu" v-show="showshanchu == item.id && item.id != 0" style="color:#000000; margin-left: 20px; font-size: 16px;" @click.stop="bianjikai(item)"></i>
            <i class="el-icon-error bu" v-show="showshanchu == item.id && item.id != 0" style="color:#000000; margin-left: 20px; font-size: 16px; position: absolute; right: -5px; top: -5px;" @click.stop="shanchu(item)"></i>
          </div>
        </div>

        <el-divider></el-divider>

        <div style="margin-bottom: 10px;" class="kflexc">
          <div class="kflexbc" style="width: 100%;">
            <div class="kflexc">
              <div style="font-size: 16px; margin-right: 10px; color: #333;">已选择的列表项名称</div>
              <el-tooltip placement="top">
                <div slot="content">
                  注：列表项的排序即为导出表的字段排序
                </div>
                <i class="el-icon-warning" style="color:#000000; font-size: 16px;" ></i>
              </el-tooltip>
            </div>
            <div style="color: rgb(12, 131, 255); border: 1px rgb(12, 131, 255) solid; padding: 8px 20px; border-radius: 20px; cursor: pointer;" @click="baocunkai">将当前所选项创建为模板</div>
          </div>

        </div>
        <div>

          <draggable  v-model="arr2" :options="{animation:500}" @change="picdesc">
            <transition-group class="kflexc" style="margin-bottom: 20px;">
              <div class="reviewphone" v-for="item in arr2" :key="item.key" style="cursor: move; margin-right: 10px; margin-bottom: 10px;">
                {{item.value}}
              </div>
            </transition-group>
          </draggable>

          <!-- <div v-for="item in arr2" :key="item.key" style="margin-right: 10px; margin-bottom: 10px; ">{{item.value}}</div> -->

        </div>

        <div style="margin-bottom: 20px; font-size: 16px; color: #333;">选择需要导出的列表项</div>


        <div style="max-height: 420px; overflow: auto; background: rgb(247, 248, 250); padding: 20px; border-radius: 10px; position: relative;">
          <div style="position: absolute; right: 20px; top: 20px; color: rgb(38, 120, 255); cursor: pointer;" @click="qingkong">清除所有</div>
          <div v-for="(item,index) in all" :key="index">
            <div style="margin: 10px 0; font-size: 14px; color: #333333; font-weight: bold;">{{item.permission_label}}</div>
            <div>
              <el-checkbox-group v-model="arr" @change="test">
                  <el-checkbox :label="item2.key" v-for="item2 in item.permission_item" :key="item2.key">
                    {{item2.value}}
                    <el-tooltip placement="top" v-if="item2.tag">
                      <div slot="content">
                        {{item2.tag}}
                      </div>
                      <i class="el-icon-warning" style="color:#666; font-size: 16px;" ></i>
                    </el-tooltip>
                  </el-checkbox>
              </el-checkbox-group>


            </div>
          </div>
        </div>

      	<div slot="footer" class="dialog-footer">
          <a href="https://file.storep.91haoka.cn/gantanhao/zidongdaochushiyongshuoming.pdf?attname=" style="float: left; color: #409EFF !important; font-size: 14px; padding: 4px;">自动导出使用说明</a>
          <el-button  round @click="go2" >查看已经生成的报表</el-button>
      		<el-button type="danger" round @click="go" :loading="shengchenging">生成报表</el-button>
      	</div>
      </el-dialog>

      <el-dialog title="快速导出模版名称" :visible.sync="log2" :close-on-click-modal="false" width="400px">
        <el-input  v-model="baocunall.title" placeholder="请输入导出模板名称"></el-input>
        <div slot="footer" class="dialog-footer">
        	<el-button type="danger" round @click="baocun">确定</el-button>
        </div>
      </el-dialog>
	</div>
</template>

<script>
  import draggable from 'vuedraggable';
	import axios from "axios";

	export default {
		name: 'dianjichakan',
    components:{
      draggable
    },
    props:['id','type'],
		data() {
			return {
        showshanchu:"",
        act:"",
        log:false,
        all:[],
        list:[],
        arr:[],
        arr2:[],
        baocunall:{
          id:"",
          title:"",
          data:[],
          type:this.type
        },
        log2:false,
        shengchenging:false
			};
		},
		created() {


		},
		mounted() {
      // this.baocunall.type = this.type
		},
		methods: {
      picdesc: function(evt) {
        const element = this.arr.splice(evt.moved.oldIndex, 1)[0];
        this.arr.splice(evt.moved.newIndex, 0, element);
      },
      go2:function(){
        let routeData = this.$router.resolve({
        	path: '/order_export2',
          query:{
            type_new:this.type
          }
        });
        window.open(routeData.href, '_blank');
      },
      mouseenter2:function(item){
        this.$set(this, 'showshanchu', item.id);
        this.$forceUpdate();
      },
      mouseout2:function(item){
        this.showshanchu = ""
      },
      qingkong:function(){
        this.arr = []
        this.test()
      },
      // mouseEnter:function(item){
      //   this.act = item.id
      //   console.log(this.act)
      // },
      changeitem:function(item){

        this.act = item.id
        this.arr = []
        this.list.forEach(item2=>{
          if(item.id == item2.id){
            item2.data.forEach(item=>{
              this.arr.push(item.key)
            })
          }
        })
        this.test()
      },
      shanchu:function(item){
        this.$confirm('确定删除该模版？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios.post("/api/plan-market/delete/order/export/model",{id:item.id})
          	.then(response=> {
          		if(response.data.msg.code == 0) {
          			this.$message.success('操作成功');
                this.getlist()
          		}else{
                this.$message.error(response.data.msg.info);
              }
          	})
        })


      },
      bianjikai:function(item){

        this.baocunall.title  = item.title
        this.baocunall.id = item.id
        this.log2 = true
      },
      test:function(){
        console.log(this.all)
        console.log(this.arr)
        let list = []
        this.all.forEach(item=>{
          list = [...list,...item.permission_item]
        })
        this.arr2 = []
        this.arr.forEach(item=>{
          list.forEach(item2=>{
            if(item == item2.key){
              this.arr2.push(item2)
            }
          })
        })

        console.log(this.arr2)
      },

      getlist:function(){
        axios.get("/api/plan-market/get/order/export/model?type="+this.type)
        	.then(response=> {
        		if(response.data.msg.code == 0) {
        			this.list = response.data.data
              this.arr = []
              if(this.list.length > 0){
                this.list[0].data.forEach(item=>{
                  this.arr.push(item.key)
                })
                this.test()

                this.act = this.list[0].id
              }else{

              }
              this.log = true
        		}else{
              this.$message.error(response.data.msg.info);
            }
        	})
      },

      chushihua:function(){
        this.shengchenging = false
        axios.get("/api/plan-market/get/order/export/items?type="+this.type)
        	.then(response=> {
        		if(response.data.msg.code == 0) {
        			this.all = response.data.data
              this.getlist()
        		}else{
              this.$message.error(response.data.msg.info);
            }
        	})
      },
      baocunkai:function(item){
        if(this.arr.length == 0){
          this.$message.error('导出字段不能为空');
          return
        }
        this.baocunall.id = ''
        this.baocunall.title = ''
        this.log2 = true
      },
      baocun:function(){
        this.baocunall.data = this.arr
        axios.post("/api/plan-market/save/order/export/model",this.baocunall)
        	.then(response=> {
        		if(response.data.msg.code == 0) {
        			this.$message.success('操作成功');
              this.log2 = false
              this.getlist()
        		}else{
              this.$message.error(response.data.msg.info);

            }
        	})
      },
      go:function(){
        this.shengchenging = true
        this.$emit('daochulogsguanbi',{
          act:this.act,
          arr:this.arr
        })
        this.log = false
      }
		}
	};
</script>

<style lang="scss" scoped>
  .dianjichakan{
    .act{ background: #409EFF !important; color: #fff !important;
      /deep/ .el-icon-edit{ color: #fff !important;}
    }
    /deep/ .el-checkbox{ max-width: 150px; margin-bottom: 10px;}
    /deep/ .el-button--danger{ background: #2974FF;}
    /deep/ .el-dialog__body{ padding: 10px 30px;}
    // .bu{pointer-events: none;}
  }
</style>
